<template>
    <el-dialog v-model="dialogVisible" :destroy-on-close="true" :align-center="true" width="50%" :title="`通用语`">
      <el-form
        ref="ruleFormRef"
        :rules="rules"
        :disabled="dialogData.isView"
        :model="dialogData.itemInfo"
        label-width="100px"
        label-suffix=" :"
        :hide-required-asterisk="dialogData.isView"
      >
        <el-form-item label="请用语" prop="content">
            <el-input
          v-model="dialogData.itemInfo.content"
          placeholder="请输入通用语"
          type="textarea"
          rows="4"
          maxlength="200"
          show-word-limit
        />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" v-show="!dialogData.isView" @click="handleSubmit" :loading="btnLoading">确定</el-button>
      </template>
    </el-dialog>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive } from "vue";
  import { ElMessage, FormInstance } from "element-plus";
  import { getOptTitle, OptEnum } from "@/biz/eenum/appEnum";
  import { DialogParam } from "@/biz/interface/DialogType";
  import { getCommonUseInfoApi, saveCommonUseApi } from "@/api/modules/common/comuse"; 
import { CommonUseEntity } from "@/biz/interface/CommonUse";
  
  const rules = reactive({
    content: [{ required: true, message: "请用语不能为空", trigger: "blur" }]
  });
  
  //页面的数据
  interface UserDialogOption extends DialogParam {
    //弹出表单的标题
    title: string;
    //是否是查看状态，查看状态是不可以提交数据  isView: false,
    isView: boolean;
    //是否是审核状态
    isAudit: boolean;
    //当前的数据对象
    itemInfo: CommonUseEntity;
  }
  
  //提交按钮，避免多次提交
  const btnLoading = ref(false);
  // 弹出框的参数
  const dialogVisible = ref(false);
  const dialogData = reactive<UserDialogOption>({
    optType: OptEnum.UNKNOW,
    title: "",
    isView: false,
    isAudit: false,
    itemInfo: {
      content: ""
    }
  });
  
  // 接收父组件传过来的参数
  const acceptParams = (params: DialogParam): void => {
    dialogData.optType = params.optType;
    dialogData.rowData = params.rowData;
  
    dialogData.isView = dialogData.optType === OptEnum.VIEW;
    dialogData.isAudit = dialogData.optType === OptEnum.AUDIT;
    dialogData.title = getOptTitle(dialogData.optType);
  
    if (dialogData.optType === OptEnum.CREATE) {
      initItemInfo();
    } else if (dialogData.rowData && dialogData.rowData.id) {
      getItemInfo(dialogData.rowData.id);
    }
  
    dialogVisible.value = true;
  };
  
  const initItemInfo = (): void => {
    dialogData.itemInfo = {
      content: ""
    };
  };
  
  //获取当前数据的详情，不通过表格上的数据行，直接调用接口获取数据
  const getItemInfo = async (id: string) => {
    if (id) {
      //通过接口获取数据
      let { data } = await getCommonUseInfoApi({ id });
      // console.log("接收到服务器端的数据", data);
      dialogData.itemInfo = data as unknown as CommonUseEntity;
    }
  }; 
  
  // 提交数据（新增/编辑）
  const ruleFormRef = ref<FormInstance>();
  const handleSubmit = () => {
    btnLoading.value = true;
    ruleFormRef.value!.validate(async valid => {
      if (!valid) {
        btnLoading.value = false;
        return;
      }
      try {

        let res = await saveCommonUseApi({
          ...dialogData.itemInfo
        });
        if (res.data) {
          ElMessage.success({ message: `保存成功！` });
          //刷新列表数据
          emits("refresh-list");
          dialogVisible.value = false;
        }
      } catch (error) {
        // console.log(error);
      } finally {
        btnLoading.value = false;
      }
    });
  };
  
  //页面事件
  const emits = defineEmits(["refresh-list"]);
  
  //页面参数
  defineExpose({
    acceptParams
  });
  </script>
  <style scoped lang="scss">
  .bigBtn {
    width: 200px;
    height: 60px;
    font-size: 1.5em;
    font-weight: 500;
  }
  </style>
  